<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="false"
      :showBackIcon="false"
      :background="{ background: 'transparent' }"
      :border-bottom="false"
      title=" "
    >
      <view class="segmentedBox">
        <u-subsection
          :list="subsectionList"
          :current="subsectionIndex"
          bgColor="rgba(255,255,255,0.4)"
          @change="subsectionChange"
        >
        </u-subsection>
      </view>
    </u-navbar>

    <image
      class="bg"
      src="/static/images/icon-enterpriseMerchantBg.png"
      mode="widthFix"
    ></image>

    <view class="content">
      <view class="stepBox">
        <u-steps :list="infoList" :current="current"></u-steps>
      </view>

      <template v-if="current === 0">
        <template v-if="subsectionIndex === 0">
          <view class="formBox">
            <u-form :model="formModel" ref="uForm" :label-width="280">
              <u-form-item label="身份证拍照(人像面)">
                <u-upload
                  ref="back"
                  :action="action"
                  :max-count="1"
                  :auto-upload="true"
                  :custom-btn="true"
                  width="285"
                  height="205"
                  @on-uploaded="onUploadedBusinessLicense"
                  @on-remove="onRemoveBusinessLicense"
                >
                  <view
                    slot="addBtn"
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <image
                      class="customBtn"
                      :src="`${
                        formModel.idCardFront
                          ? 'https://file.diqihengrun.com/image' +
                            formModel.idCardFront
                          : '/static/images/icon-rx.png'
                      } `"
                    ></image>
                  </view>
                </u-upload>
              </u-form-item>
              <u-form-item label="身份证拍照(国徽面)">
                <u-upload
                  ref="back"
                  :action="action"
                  :max-count="1"
                  :auto-upload="true"
                  :custom-btn="true"
                  width="285"
                  height="205"
                  @on-uploaded="onUploadedBusinessLicense"
                  @on-remove="onRemoveBusinessLicense"
                >
                  <view
                    slot="addBtn"
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <image
                      class="customBtn"
                      :src="`${
                        formModel.idCardBack
                          ? 'https://file.diqihengrun.com/image' +
                            formModel.idCardBack
                          : '/static/images/icon-gh.png'
                      } `"
                    ></image>
                  </view>
                </u-upload>
              </u-form-item>
              <u-form-item label="姓名">
                <u-input
                  v-model="formModel.corporateName"
                  :disabled="disabled"
                  placeholder="请输入姓名"
                />
              </u-form-item>
              <u-form-item label="身份证号">
                <u-input
                  v-model="formModel.idNumber"
                  :disabled="disabled"
                  placeholder="请输入身份证号"
                />
              </u-form-item>
              <u-form-item label="身份证开始日期">
                <u-input
                  v-model="formModel.idCardStartDate"
                  :disabled="true"
                  placeholder="身份证开始日期"
                  @click="handleDatePicker('idCardStartDate')"
                />
                <u-icon slot="right" name="arrow-right"></u-icon>
              </u-form-item>
              <u-form-item label="身份证截止日期">
                <u-input
                  v-model="formModel.idCardEndDate"
                  :disabled="true"
                  placeholder="身份证结束日期"
                  @click="handleDatePicker('idCardEndDate')"
                />
                <u-icon slot="right" name="arrow-right"></u-icon>
              </u-form-item>
            </u-form>
          </view>
        </template>
        <template v-else>
          <view class="formBox">
            <u-form :model="formModel" ref="uForm" :label-width="280">
              <u-form-item label="营业执照">
                <u-upload
                  ref="back"
                  :action="action"
                  :max-count="1"
                  :auto-upload="true"
                  :custom-btn="true"
                  width="285"
                  height="205"
                  @on-uploaded="onUploadedBusinessLicense"
                  @on-remove="onRemoveBusinessLicense"
                >
                  <view
                    slot="addBtn"
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <image
                      class="customBtn"
                      :src="`${
                        formModel.businessLicense
                          ? 'https://file.diqihengrun.com/image' +
                            formModel.businessLicense
                          : '/static/images/icon-yyzz.png'
                      } `"
                    ></image>
                  </view>
                </u-upload>
              </u-form-item>
              <u-form-item label="营业执照名称">
                <u-input
                  v-model="formModel.businessLicenseName"
                  :disabled="disabled"
                  placeholder="请输入营业执照名称"
                />
              </u-form-item>
              <u-form-item label="证件代码">
                <u-input
                  v-model="formModel.idCode"
                  :disabled="disabled"
                  placeholder="请输入证件代码"
                />
              </u-form-item>
              <u-form-item label="执照开始日期">
                <u-input
                  v-model="formModel.licenseStartDate"
                  :disabled="true"
                  placeholder="执照开始日期"
                  @click="handleDatePicker('licenseStartDate')"
                />
                <u-icon slot="right" name="arrow-right"></u-icon>
              </u-form-item>
              <u-form-item label="执照截止日期">
                <u-input
                  v-model="formModel.licenseEndDate"
                  :disabled="true"
                  placeholder="执照结束日期"
                  @click="handleDatePicker('licenseEndDate')"
                />
                <u-icon slot="right" name="arrow-right"></u-icon>
              </u-form-item>
              <u-form-item label="注册地址" :border-bottom="false">
                <u-input
                  v-model="formModel.registeredAddress"
                  :disabled="disabled"
                  placeholder="请输入注册地址"
                />
              </u-form-item>
            </u-form>
          </view>

          <view class="formBox">
            <u-form :model="formModel" ref="uForm" :label-width="280">
              <u-form-item label="法人身份证(人像面)">
                <u-upload
                  ref="back"
                  :action="action"
                  :max-count="1"
                  :auto-upload="true"
                  :custom-btn="true"
                  width="285"
                  height="205"
                  @on-uploaded="onUploadedBusinessLicense"
                  @on-remove="onRemoveBusinessLicense"
                >
                  <view
                    slot="addBtn"
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <image
                      class="customBtn"
                      :src="`${
                        formModel.idCardFront
                          ? 'https://file.diqihengrun.com/image' +
                            formModel.idCardFront
                          : '/static/images/icon-rx.png'
                      } `"
                    ></image>
                  </view>
                </u-upload>
              </u-form-item>
              <u-form-item label="法人身份证(国徽面)">
                <u-upload
                  ref="back"
                  :action="action"
                  :max-count="1"
                  :auto-upload="true"
                  :custom-btn="true"
                  width="285"
                  height="205"
                  @on-uploaded="onUploadedBusinessLicense"
                  @on-remove="onRemoveBusinessLicense"
                >
                  <view
                    slot="addBtn"
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <image
                      class="customBtn"
                      :src="`${
                        formModel.idCardBack
                          ? 'https://file.diqihengrun.com/image' +
                            formModel.idCardBack
                          : '/static/images/icon-gh.png'
                      } `"
                    ></image>
                  </view>
                </u-upload>
              </u-form-item>
              <u-form-item label="法人姓名">
                <u-input
                  v-model="formModel.corporateName"
                  :disabled="disabled"
                  placeholder="请输入法人姓名"
                />
              </u-form-item>
              <u-form-item label="身份证号">
                <u-input
                  v-model="formModel.idNumber"
                  :disabled="disabled"
                  placeholder="请输入身份证号"
                />
              </u-form-item>
              <u-form-item label="身份证开始日期">
                <u-input
                  v-model="formModel.idCardStartDate"
                  :disabled="true"
                  placeholder="身份证开始日期"
                  @click="handleDatePicker('idCardStartDate')"
                />
                <u-icon slot="right" name="arrow-right"></u-icon>
              </u-form-item>
              <u-form-item label="身份证截止日期">
                <u-input
                  v-model="formModel.idCardEndDate"
                  :disabled="true"
                  placeholder="身份证结束日期"
                  @click="handleDatePicker('idCardEndDate')"
                />
                <u-icon slot="right" name="arrow-right"></u-icon>
              </u-form-item>
            </u-form>
          </view>
        </template>
      </template>

      <template v-if="current === 1">
        <view class="formBox">
          <u-form :model="formModel" ref="uForm" :label-width="280">
            <u-form-item label="商户经营名称">
              <u-input
                v-model="formModel.businessName"
                :disabled="disabled"
                placeholder="请输入商户经营名称"
              />
            </u-form-item>

            <u-form-item label="商户所在地">
              <u-input
                v-model="formModel.merchantLocation"
                :disabled="true"
                placeholder="请选择省市"
                @click="handleRegionPicker('merchantLocation')"
              />
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>

            <u-form-item label="详细地址">
              <u-input
                v-model="formModel.detailedAddress"
                :disabled="disabled"
                placeholder="请输入商户所在地详细地址"
              />
            </u-form-item>

            <u-form-item label="邮箱">
              <u-input
                v-model="formModel.email"
                :disabled="true"
                placeholder="请输入邮箱"
              />
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>

            <u-form-item label="联系人名称">
              <u-input
                v-model="formModel.contactName"
                :disabled="true"
                placeholder="请输入联系人姓名"
              />
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>

            <u-form-item label="手机号码" :border-bottom="false">
              <u-input
                v-model="formModel.mobileNumber"
                :disabled="true"
                placeholder="请输入手机号码"
              />
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
          </u-form>
        </view>
      </template>

      <template v-if="current === 2">
        <view class="formBox">
          <u-form :model="formModel" ref="uForm" :label-width="280">
            <u-form-item label="结算卡正面(数字面)">
              <u-upload
                ref="settlementCardFrontRef"
                :action="action"
                :max-count="1"
                :auto-upload="true"
                :custom-btn="true"
                width="285"
                height="205"
                @on-uploaded="onUploadedBusinessLicense"
                @on-remove="onRemoveBusinessLicense"
              >
                <view
                  slot="addBtn"
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <image
                    class="customBtn"
                    :src="`${
                      formModel.settlementCardFront
                        ? 'https://file.diqihengrun.com/image' +
                          formModel.settlementCardFront
                        : '/static/images/icon-jskzm.png'
                    } `"
                  ></image>
                </view>
              </u-upload>
            </u-form-item>

            <u-form-item label="银行卡号">
              <u-input
                v-model="formModel.bankCardNumber"
                :disabled="disabled"
                placeholder="请输入银行卡号"
              />
            </u-form-item>

            <u-form-item label="开户城市">
              <u-input
                v-model="formModel.accountOpeningCity"
                :disabled="true"
                placeholder="请选择开户城市"
                @click="handleRegionPicker('accountOpeningCity')"
              />
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>

            <u-form-item label="开户支行" :border-bottom="false">
              <u-input
                v-model="formModel.accountOpeningSubBranch"
                :disabled="true"
                placeholder="请选择开户支行"
                @click="handleAccountOpeningSubBranch"
              />
              <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
          </u-form>
        </view>
      </template>

      <template v-if="current === 3">
        <view class="formBox">
          <u-form :model="formModel" ref="uForm" :label-width="280">
            <u-form-item label="门头照">
              <u-upload
                ref="back"
                :action="action"
                :max-count="1"
                :auto-upload="true"
                :custom-btn="true"
                width="285"
                height="205"
                @on-uploaded="onUploadedBusinessLicense"
                @on-remove="onRemoveBusinessLicense"
              >
                <view
                  slot="addBtn"
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <image
                    class="customBtn"
                    :src="`${
                      formModel.doorPhoto
                        ? 'https://file.diqihengrun.com/image' +
                          formModel.doorPhoto
                        : '/static/images/icon-mtz.png'
                    } `"
                  ></image>
                </view>
              </u-upload>
            </u-form-item>

            <u-form-item label="门店内设照">
              <u-upload
                ref="back"
                :action="action"
                :max-count="1"
                :auto-upload="true"
                :custom-btn="true"
                width="285"
                height="205"
                @on-uploaded="onUploadedBusinessLicense"
                @on-remove="onRemoveBusinessLicense"
              >
                <view
                  slot="addBtn"
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <image
                    class="customBtn"
                    :src="`${
                      formModel.storePhotos
                        ? 'https://file.diqihengrun.com/image' +
                          formModel.storePhotos
                        : '/static/images/icon-mdnsz.png'
                    } `"
                  ></image>
                </view>
              </u-upload>
            </u-form-item>

            <u-form-item label="门店收银台照">
              <u-upload
                ref="back"
                :action="action"
                :max-count="1"
                :auto-upload="true"
                :custom-btn="true"
                width="285"
                height="205"
                @on-uploaded="onUploadedBusinessLicense"
                @on-remove="onRemoveBusinessLicense"
              >
                <view
                  slot="addBtn"
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <image
                    class="customBtn"
                    :src="`${
                      formModel.storeCheckoutPagePhoto
                        ? 'https://file.diqihengrun.com/image' +
                          formModel.storeCheckoutPagePhoto
                        : '/static/images/icon-mdsytz.png'
                    } `"
                  ></image>
                </view>
              </u-upload>
            </u-form-item>

            <u-form-item label="商户名称">
              <u-input
                v-model="formModel.merchantName"
                :disabled="disabled"
                placeholder="请输入商户名称"
              />
            </u-form-item>

            <u-form-item label="门店联系人">
              <u-input
                v-model="formModel.storeContact"
                :disabled="disabled"
                placeholder="请选择门店联系人"
              />
            </u-form-item>

            <u-form-item label="联系人手机号">
              <u-input
                v-model="formModel.contactPersonPhone"
                :disabled="disabled"
                placeholder="请输入联系人手机号"
              />
            </u-form-item>

            <u-form-item label="经营内容" :border-bottom="false">
              <u-input
                v-model="formModel.businessContent"
                :disabled="disabled"
                placeholder="请输入门店经营内容"
              />
            </u-form-item>
          </u-form>
        </view>
      </template>
    </view>

    <view class="bottom">
      <view v-if="current > 0" class="preBtn" @click="handlePre">上一步</view>
      <view v-if="current < 4" class="nextBtn" @click="handleNext">下一步</view>
    </view>

    <u-picker
      v-model="showPicker"
      mode="time"
      :params="params"
      @confirm="timeConfirm"
    ></u-picker>

    <u-picker
      v-model="showRegionPicker"
      mode="region"
      @confirm="regionConfirm"
    ></u-picker>

    <u-picker
      mode="selector"
      v-model="showSubBranch"
      :default-selector="[0]"
      :range="subBranchRange"
      @confirm="subBranchConfirm"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      subsectionList: [
        {
          name: '小微',
        },
        {
          name: '企业',
        },
      ],
      infoList: [
        {
          name: '执照信息',
        },
        {
          name: '商户信息',
        },
        {
          name: '结算信息',
        },
        {
          name: '门店信息',
        },
      ],
      disabled: false,
      list: [],
      current: 0,
      subsectionIndex: '',
      formModel: {
        businessLicense: '',
        businessLicenseName: '',
        idCode: '',
        licenseEndDate: '',
        licenseStartDate: '',
        registeredAddress: '',
        idCardFront: '',
        idCardBack: '',
        corporateName: '',
        idNumber: '',
        idCardStartDate: '',
        idCardEndDate: '',
        businessName: '',
        merchantLocation: '',
        detailedAddress: '',
        email: '',
        contactName: '',
        mobileNumber: '',
        settlementCardFront: '',
        bankCardNumber: '',
        accountOpeningCity: '',
        AccountOpeningSubBranch: '',
        doorPhoto: '',
        storePhotos: '',
        storeCheckoutPagePhoto: '',
        merchantName: '',
        storeContact: '',
        contactPersonPhone: '',
        businessContent: '',
      },
      action: '',
      showPicker: false,
      showRegionPicker: false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
      fromItem: '',
      showSubBranch: false,
      subBranchRange: [1, 2, 3],
    };
  },
  onLoad: function (options) {
    this.getData(0);
  },
  methods: {
    getData(index) {},
    subsectionChange(index) {
      this.subsectionIndex = index;
      this.getData(index);
    },
    onUploadedBusinessLicense(lists, name) {
      let filePath = lists[0].response.data[0].filePath;
      this.formModel.businessLicense = filePath;
    },
    onRemoveBusinessLicense(index, lists, name) {
      this.formModel.businessLicense = '';
    },
    handleNext() {
      this.current++;
    },
    handlePre() {
      this.current--;
    },
    handleDatePicker(from) {
      this.fromItem = from;
      this.showPicker = true;
    },
    timeConfirm(value) {
      const { year, month, day } = value;
      this.formModel[this.fromItem] = `${year}-${month}-${day}`;
    },
    handleRegionPicker(from) {},
    regionConfirm(value) {},
    handleAccountOpeningSubBranch() {
      this.showSubBranch = true;
    },
    subBranchConfirm(value) {},
  },
};
</script>
<style lang="scss" scope>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0 0 120rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }

  .segmentedBox {
    position: absolute;
    top: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 300rpx;
    z-index: 99;
  }
}

.content {
  position: relative;
  width: 100%;
  padding: 220rpx 30rpx 60rpx;
}

.stepBox {
  width: 100%;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
}

.formBox {
  margin-top: 30rpx;
  width: 100%;
  padding: 30rpx 30rpx 10rpx;
  background: #ffffff;
  border-radius: 20rpx;
  .customBtn {
    width: 174rpx;
    height: 122rpx;
  }
}

.bottom {
  position: fixed;
  bottom: 60rpx;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 30rpx;

  .preBtn {
    margin-right: 30rpx;
    flex: 1;
    min-width: 0;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: normal;
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, #d9b189, #c5a27f);
    border-radius: 20rpx;
  }

  .nextBtn {
    flex: 1;
    min-width: 0;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: normal;
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, #332108, #201403);
    border-radius: 20rpx;
  }
}
</style>
